<template>
  <div id="app">
    <router-view></router-view>
    <router-view name='footer'></router-view>
  </div>
</template>

<style lang="scss">
@import '@/lib/reset.scss';
html,body,#app{
  @include rect(100%,100%);
  list-style: none;
}
#app{
  @include flexbox();
  @include flex-direction(column);
  @include overflow(auto);
}
.box{
  @include flex();
  @include rect(100%,auto);
  @include flexbox();
  @include flex-direction(column);
  @include overflow(hidden)
}
.content{
  @include overflow(auto);
  @include rect(100%,100%)
}
.header{
  @include rect(100%,0.44rem);
  @include background-color(#1d1d1d);
  // @include font-size(0.20rem);
  // @include font-weight(bolder);
  // @include line-height(0.44rem);
  // @include text-align(center);
  // @include color(#fff);
  min-height:50px;
  @include background-color(rgb(218, 200, 104));
}
.footer{
  @include rect(100%,0.5rem);
  @include background-color(#efefef);
}
.footer ul {
  @include rect(100%,100%);
  @include flexbox();
}
.footer ul li{
  @include flex();
  @include rect(auto,100%);
  @include justify-content();
  @include align-items();
  @include text-align();
  @include flex-direction(column)
}
.footer ul li span{
  @include display(block);
  @include font-size(0.24rem)
}
.footer ul li p{
  @include font-size(0.12rem);
  @include margin(-5px 0 0)
}
.router-link-active{
  @include color(red)
}
  #headerL{
      padding: 6px 10px;
      overflow: auto;
      background: #fff;
      border-bottom: 1px solid #e9e9e9
  }
  aside{
     padding: 0;
     margin: 0;
      display: inline-block !important;
  }
  section{
      width: 100%;
      height: 100%;
      border:1px solid #e9e9e9;
      border-radius: 12px;
      padding: 0px 10px;
      background: #f5f5f5;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      font-size:12px;
      height:28px;
      margin: 5px 0;
      color: #333 !important;;
  }
</style>
